<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>切换</title>
		<style>
			#div1{
				margin-left: 28%;
			}
			#div1 input{
				width: 145px;
				height: 33px;
				float: left;
				border: solid 0px;
				background: black;
				color: white;
				outline: none;
			}
			#div1 input.active{
				background: red;
			}
			#div1 div{
				padding: 10px 10px;
				width: 560px;
				height: 230px;
				background: red;
				display: none;
			}
			#div1 div.active{
				display: block;
			}
			h2,p{
				text-align: center;
				color: white;
			}
			#div1 div.n1{
				background: red;
				display: block;
			}
			#div1 div.n2{
				background: green;
			}
			#div1 div.n3{
				background: blue;
			}
			#div1 div.n4{
				background: orange;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div class="n1">
				<h2>London</h2>
				<p>Lodon is the capital  of France</p>
			</div>
			<div class="n2">
				<h2>Paris</h2>
				<p>Paris is the capital city of England</p>
			</div>
			<div class="n3">
				<h2>Tokyo</h2>
				<p>Tokyo is the capital  of Japan</p>
			</div>
			<div class="n4">
				<h2>Oslo</h2>
				<p>Oslo is the capital  of Norway</p>
			</div>
		    <input type="button" value="London"/>
		    <input type="button" value="Paris"/>
		    <input type="button" value="Tokyo"/>
		    <input type="button" value="Oslo" />
		</div>
		<script>
			var dom=document.getElementById('div1');
			var  btns=dom.getElementsByTagName('input');
			var divs=dom.getElementsByTagName('div');
			for(var i=0;i<btns.length;i++){
				btns[i].onclick=function(){
					for(var j=0;j<btns.length;j++){
						btns[j].style.background='black';
					}
					if(btns[0]==this){
						this.style.background='red';
					}else if(btns[1]==this){
						this.style.background='green';
					}else if(btns[2]==this){
						this.style.background='blue';
					}else if(btns[3]==this){
						this.style.background='orange';
					}
					for(var k=0;k<divs.length;k++){
						if(this==btns[k]){
							divs[k].style.display='block';
						}else{
							divs[k].style.display='none';
						}
					}
				}
			}
		</script>
	</body>
</html>